<template>
  <h1>首页</h1>
  <h2>{{ formateInfo(data.msg) }}</h2>
  <h2>{{ info }}</h2>
  <button @click="changeInfo">点击修改 info</button>
  <!-- 注意：获取 ref 节点是 命名不是 赋值 -->
  <h3 ref="myh3">我是一个节点</h3>
  <h3>{{ newInfo }}</h3>
</template>

<script setup>
// 我们可以将 setup 写在 标签里，这是一个语法糖，可以避免 繁琐的 return（意大利苗条）
// 注意：如果没有简写 props emits 直接写成对象；简写以后只能使用 defindeProps\defineEmits 声明
import { reactive, ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';

// 我们可以使用 reactive 来声明一个响应式数据对象，注意调用必须使用 data.msg ，不推荐使用
const data = reactive({
  msg: "前端老兵"
})

// 使用 ref 来声明一个响应式数据对象，可以直接使用变量名，但是要注意在 js 中操作需要 info.value 推荐使用
const info = ref("加油学习！相信 2209！")
const changeInfo = () => {
  info.value = "今年过年要学习啊，要学就学 Vue！"
}

// 获取 DOM 因为没有了 this 所以换了一点思路，创建一个 ref 对象 Vue3 会自动帮我们进行关联
const myh3 = ref(null)
onMounted(() => {
  console.log(myh3.value);
})

// import {defineProps, defineEmits} from 'vue'  使用 父子组件通信，首先要导包
// const props = defineProps({
//   msg: {
//     type: String,
//     default: "默认值"
//   }
// })
// const  emits = defineEmits(['childFn']);

// 计算属性
const newInfo = computed(()=>{
  return info.value + "..."
})

// 过滤器在 Vue3 直接取消了，直接定义一个方法，直接进行调用就可以
const formateInfo = (val)=> {
  return val + "..."
}

// 组件的调用，直接导入即可使用

// 路由的调用
// const router = useRouter()
// router.push("/aaa/haha")
// 路由信息获取
const route = useRoute()
console.log(route);

// 状态管理
// const state = useStore
// state.dispatch()


</script>

<style lang="scss" scoped>

</style>